<template>
    <div class="cart">
        <headView></headView>
        <div class="box">
            <div class="mbx">
                <p>首页</p>
                <span>></span>
                <p>购物车</p>
            </div>
            <div class="header">
                <div class="checkAll" @click="slectedAll">
                    <i :class="{ 'active ': isAllChecked }"></i>
                    <span>全选</span>
                </div>
                <p class="h-dic">商品信息</p>
                <p class="h-price">单价</p>
                <p class="h-num">数量</p>
                <p class="h-nowprice">小计</p>
                <p class="h-change">操作</p>
            </div>
            <div class="body">
                <div class="body_item" v-for="item in list" :key="item.index">
                    <div class="checked">
                        <i :class="item.selected ? 'active' : ''" @click="slected(item.id)"></i>
                    </div>
                    <div class="item-img">
                        <img :src="item.picture" alt="" class="img">
                        <div class="dic">
                            <p>{{ item.name }}</p>
                            <span>{{ item.attrsText }}</span>
                        </div>
                    </div>
                    <p class="price">{{ item.price }}</p>
                    <p class="num">
                        <span class="cut" @click="cut(item.id)">-</span>
                        <span>{{ item.count }}</span>
                        <span class="add" @click="add(item.id)">+</span>
                    </p>
                    <p class="nowPrice">{{ item.nowPrice * item.count }}</p>
                    <p class="del" @click="del(item.id)">删除</p>
                </div>
            </div>
            <div class="footer">
                <div class="checkAll" @click="slectedAll">
                    <i :class="{ 'active': isAllChecked }"></i>
                    <span>全选</span>
                </div>
                <div class="js">
                    <p>共{{ total.num }}件商品，已选择{{ total.count }}件，商品合计：<span>￥{{ total.price }}</span></p>
                    <button class="btn" @click="toOrder">下单结算</button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import headView from "../../components/HeadView.vue";
export default {
    name: "CartView",
    components: {
        headView,
    },
    data() {
        return {
            list: [],
        }
    },
    created() {
        this.$api.getCart().then(res => {
            console.log(res)
        })
        this.$api.getCartList().then(res => {
            console.log(res.data.result)
            this.list = res.data.result
        })
    },
    methods: {
        slected(id) {
            this.list.forEach(item => {
                if (item.id == id) {
                    item.selected = !item.selected
                }
            })
        },
        slectedAll() {
            const checked = this.isAllChecked;
            this.list.forEach(item => {
                return item.selected = !checked
            });
        },
        add(id) {
            console.log(id);
            this.list.forEach(item => {
                // console.log(item.id);
                if (item.id == id) {
                    item.count++
                }
            })
        },
        cut(id) {
            this.list.forEach(item => {
                console.log(item.id);
                if (item.id == id) {
                    item.count--
                    if (item.count == 0) {
                        console.log(item.count);
                        item.count = 0
                    }
                }
            })
        },
        del(id) {
            console.log(id);
            this.$api.del(id).then(res => {
                console.log(res)
            })
            this.list.forEach(item => {
                if (item.id == id) {
                    console.log(item);
                    this.list.splice(this.list.findIndex(item => item.id === id), 1)
                }
            })
        },
        toOrder() {
            this.$router.push("/order");
        }
    },
    computed: {
        // 全选
        isAllChecked() {
            return this.list.every(item => {
                // console.log(item.selected);
                return item.selected
            });
        },
        total() {
            let count = 0, price = 0, num = 0
            this.list.forEach(item => {
                num += item.count
                if (item.selected == true) {
                    count += item.count;
                    price += item.price * item.count;
                }
            });
            return {
                count,
                price,
                num,
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.cart {
    width: 100%;
    height: 100%;
    background: #eee;
}

.box {
    width: 1240px;
    margin: 0 auto;
}

.mbx {
    width: 1240px;
    height: 70px;
    display: flex;
    align-items: center;

    span {
        margin: 0 10px;
        color: #aaa;
    }
}

.header {
    display: flex;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background: #fff;
    padding: 0 20px;
    box-sizing: border-box;

    .checkAll {
        width: 120px;
        display: flex;
        align-items: center;

        i {
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            margin-right: 6px;
        }
    }

    .h-dic {
        width: 400px;
    }

    .h-price {
        width: 220px;
    }

    .h-num {
        width: 180px;
    }

    .h-nowprice {
        width: 180px;
    }

    .h-change {
        width: 140px;
    }

}

.body {
    width: 1240px;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0 20px;
    box-sizing: border-box;

    .body_item {
        display: flex;
        text-align: center;
        align-items: center;
        margin: 20px 0;

        .checked {
            width: 120px;
            padding-left: 2px;
            box-sizing: border-box;

            i {
                display: block;
                width: 14px;
                height: 14px;
                border: 1px solid #ccc;
                margin-right: 6px;
            }
        }

        .item-img {
            width: 400px;
            display: flex;

            .img {
                width: 100px;
                height: 100px;
                margin-right: 10px;
            }

            .dic {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                text-align: start;

                span {
                    color: #999;
                }
            }
        }

        .price {
            width: 220px;
        }

        .num {
            width: 180px;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
        }

        .nowPrice {
            width: 180px;
            color: #cf4444;
        }

        .del {
            width: 140px;
            color: #27ba9b;
        }
    }
}

.footer {
    width: 1240px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    margin: 30px 0;
    padding: 0 20px;
    box-sizing: border-box;

    .checkAll {
        width: 120px;
        display: flex;
        align-items: center;

        i {
            display: block;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            margin-right: 6px;
        }
    }

    .js {
        display: flex;
        align-items: center;

        .btn {
            width: 180px;
            height: 50px;
            background: #27ba9b;
            color: #fff;
            font-size: 16px;
            border: 0;
            margin-left: 20px;
        }
    }

}

.active {
    background: #27ba9b;
}
</style>